<template>
<div id="">
  <div class="mb" v-if="mapShow||noteShow">
    <div id="alert" v-show="noteShow">
      <div class="alert_head">
        <span>发送短息</span>
        <i class="el-icon-close" @click="noteshow"></i>
      </div>
      <div class="alert_body">
        <p class="alert-title">发送对象：</p>
        <textarea>34 32432</textarea>
        <p class="alert-title">发送内容
          <span id="a-t-right">字数 <b>100</b> 条数 <b>2</b></span>
        </p>
        <textarea>
            发送一条短息。将从您您的消费账户中抠除0.1元
          </textarea>

        <div class="alert-state">
          <p>说明：</p>
          <p>1、发送第一条短息，将从您 消费账户中扣除0.1元</p>
          <p>2、每条短息限57个字，超出部分将由系统自动转记下一条</p>
        </div>


      </div>
      <div class="alter-bottom">
        <el-button type="success" id="btn-su" @click="noteShow=false">成功按钮</el-button>
      </div>
      <div>

      </div>
    </div>
  </div>

</div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    noteShow: false
  })
}
</script>
<style lang="scss" scoped>
.mb {
    width: 100vw;
    min-height: 100vh;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    #alert {
        width: 630px;
        height: 510px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -315px;
        margin-top: -255px;
        background-color: #fff;
    }
    .alert_head {
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid darkgrey;
        & > span {
            font-size: 18px;
            color: #303030;
            font-weight: 600;
            padding-left: 20px;
        }
        & > i {
            float: right;
            font-size: 16px;
            line-height: 45px;
            margin-right: 20px;
        }
    }
    .alert_body {
        padding: 0 20px;
        .alert-title {
            font-size: 13px;
            line-height: 35px;
            padding-top: 10px;
            #a-t-right {
                float: right;
                b {
                    color: red;
                    font-weight: 700;
                    padding: 0 5px;
                }
            }
        }
        textarea {
            min-height: 110px;
            max-height: 110px;
            min-width: 100%;
            max-width: 100%;
            background-color: #F5F6FB;
            border: 1px solid #EAEAF2;
        }
        .alert-state {
            padding-top: 15px;
            p {
                line-height: 2;
            }
        }
    }
    .alter-bottom {
        width: 100%;
        height: 50px;
        background: #FAFAFA;
        position: absolute;
        bottom: 0;

    }
    #btn-su,
    #btn-su-b {
        float: right;
        height: 30px;
        margin: 10px 20px;
    }
    #map {
        width: 460px;
        height: 450px;
        background-color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -230px;
        margin-top: -225px;
    }
    .map-body {
        padding: 0 20px;
    }
    .map-pic {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid gray;
    }
    #map-img {
        width: 80px;
        height: 50px;
    }
    .map-title {
        margin-left: 10px;
        strong {
            font-size: 14px;
            font-weight: 800;
            /*line-height: 2;*/
        }
        p {
            font-size: 12px;
            /*line-height: 1.5;*/
        }
    }
    .map-cont {
        padding: 15px 0;
        p {
            line-height: 2;
        }
    }
    /*F5F6FB*/
}
</style>
